<template>
	<div>
		<div class="mainCon qualityPicture">
			<div class="containercontent" style="height: 100%;">
				<div class="seachTip selectw100">
					<div class="inlineblock verticalmiddle infoitem">
						<div class="inlineblock verticalmiddle">
							检测项目
						</div>
						<div class="inlineblock verticalmiddle informationItem">
							<el-select v-model="testproject" clearable filterable placeholder="请选择" size="mini" @change = "changeItem">
								<el-option v-for="item in itemoptions" :key="item.id" :label="item.name" :value="item.id">
								</el-option>
							</el-select>
						</div>
					</div>
					<div class="inlineblock verticalmiddle infoitem">
						<div class="inlineblock verticalmiddle">
							能力参数
						</div>
						<div class="inlineblock verticalmiddle informationItem" style="width:calc(100% -50px)">
							<el-select v-model="abilityValue" filterable placeholder="请选择" size="mini" clearable>
								<el-option v-for="item in abilityBeanList" :key="item.id" :label="item.name" :value="item.id">
								</el-option>
							</el-select>
						</div>
					</div>

					<div class="inlineblock verticalmiddle infoitem">
						<div class="inlineblock verticalmiddle">
							控制参数
						</div>
						<div class="inlineblock verticalmiddle informationItem">
							<el-select v-model="controleValue" placeholder="请选择" size="mini" clearable>
								<el-option v-for="item in controleData" :key="item.code" :label="item.name" :value="item.code">
								</el-option>
							</el-select>
						</div>
					</div>
					<div class="inlineblock verticalmiddle infoitem">
						<div class="inlineblock verticalmiddle">
							开始时间
						</div>
						<div class="inlineblock verticalmiddle informationItem">
							<!--<el-date-picker v-model="ct_month" size="mini" style="width:100%;" type="monthrange" range-separator="-" start-placeholder="开始月份"
							 end-placeholder="结束月份" value-format="yyyy-MM" value="yyyy-MM" :clearable="false" :picker-options="pickerBeginDateBefore">
							</el-date-picker>-->
							<el-date-picker v-model="startTime" type="month" placeholder="选择月" :picker-options="pickerBeginDateBefore"  size = "mini" style = "width:100%;" format="yyyy-MM"  value-format = "yyyy-MM" :clearable="false">
            				</el-date-picker>

						</div>
					</div>
					<div class="inlineblock verticalmiddle infoitem">
						<div class="inlineblock verticalmiddle">
							结束时间
						</div>
						<div class="inlineblock verticalmiddle informationItem">
							<el-date-picker v-model="endTime" type="month" placeholder="选择月"  size = "mini" style = "width:100%;" format="yyyy-MM"  value-format = "yyyy-MM" :clearable="false" :picker-options="pickeroption">
            				</el-date-picker>
						</div>
					</div>
					<div class="inlineblock basicRightDistanceA searchIcon">
						<el-button size="mini" @click="getChartData" style="width:80px;">生成质控图</el-button>

					</div>
				</div>
				<div class="separaterowTable">
					<div id="qualityPicture" style="width:100%;height:100%;margin:auto">

					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		data() {
			let that = this;
			return {
				controleValue: '',
				testproject: '',
				itemoptions:[],
				testoptions: [],
				controleData: [],
				ct_month: [],
				abilityBeanList:[],
				abilityValue:"",
				startTime:"",
				endTime:"",
				pickerBeginDateBefore:{
					disabledDate(time) {
						return time.getTime() > Date.now();
					}
				},
				pickeroption:{
					disabledDate(time) {
						if (that.startTime != '') {
							let startDate = new Date(that.startTime);
							let endDate = Date.now() - 8.64e6;
							return (time.getTime() < startDate.getTime() - 8.64e7 || time.getTime() > Date.now());
						}
					}
				},

			}
		},
		mounted() {
			this.getdatatime();
			this.chartQctype();
		},
		methods: {
			// technology/readItemBeanList.htm
			// technology/readDetectAndItemList.htm

			getdatatime() {
				// this.ct_month = [];
				this.startTime = "";
				this.endTime = "";
				var time = new Date();
				time.setTime(time.getTime() - 3600 * 1000 * 24 * 30);

				let date = new Date(time)
				let Str = date.getFullYear() + '-' + '01';

				var month1 = date.getMonth() + 1;
				if (month1 < 10) {
					month1 = "0" + month1
				}
				let Str1 = date.getFullYear() + '-' + month1;

				// this.ct_month[0] = Str;
				// this.ct_month[1] = Str1;
				this.startTime = Str;
				this.endTime = Str1;
			},
			chartQctype() {
				this.$http({
					method: 'post',
					apiUrl: '/qc/chartQcType.htm',
				}).then(res => {
					if (res.code === 0) {
						this.controleData = res.data;
					}
				})
				this.$http({
					method: 'post',
					apiUrl: '/technology/readItemBeanList.htm',
				}).then(res => {
					if (res.code === 0) {
						this.itemoptions = res.data;
					}
				})

			},
			changeItem(val){
				this.$http({
                    method: 'post',
                    apiUrl: '/technology/readDetectAndItemList.htm',
                    params: { item: val },
                    isJson: false,
                }).then(res => {
                    if (res.code === 0) {
                        this.abilityBeanList = res.data;
                    }
                })
			},
			getChartData() {
				var params = {
					qcField: this.controleValue, //质控类型
					startTime: this.startTime,
					endTime: this.endTime,
					item:this.testproject,
					detectability:this.abilityValue

				}
				this.$http({
					method: 'post',
					apiUrl: '/qc/chart.htm',
					params: params,
					isJson: true,
				}).then(res => {
					if (res.code === 0) {
						if (!res.data.result) {
							var str = res.data.info.split(";");
							var len = str.length;
							if(str[len-1] ==''){
								len = len -1;
							}
							var info = "";
							for(var i=0 ;i<len ;i++){
								var num = Number(i) + 1;
								info = info +num + ")" + str[i] + " ; ";
							}

							this.$notify({
								message: info,
								title: "警告!",
								type: "warning"
							})
						}
						this.drawLine(res.data)

					}
				})
			},
			
			drawLine(data) {
				var xData = []
				for (var i in data.data) {
					xData.push(i)
				}
				console.log(data.lLimit, (data.lLimit / 0.8).toFixed(0))
				console.log((data.hLimit * 1.2).toFixed(0))
				let qualityPicture = this.$echarts.init(document.getElementById('qualityPicture'))
				// 绘制图表
				qualityPicture.setOption({
					tooltip: {
						trigger: 'axis',

					},
					legend: {
						x: 'center',
					},

					xAxis: {
						show: false,
						type: 'category',
						boundaryGap: false,
						data: xData,
						name: '测定频次',
						nameLocation: 'center',
						axisLabel: {
							show: false,
						}
					},
					yAxis: {
						type: 'value',
						axisLabel: {
							formatter: '{value}'
						},
						splitLine: {
							show: false
						},
						min: (data.lControl * 0.8).toFixed(0),
						max: (data.hControl * 1.2).toFixed(0),
						name: '检测值',

						// nameLocation:'center',
					},
					series: [
						{

							type: 'line',
							data: data.data,
							markPoint: {
								data: [
									// { name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }
								]
							},
							markLine: {
								symbol: 'none',//去掉箭头
								data: [
									{
										yAxis: data.avg,
										label: {
											show: true,
											formatter: '中心线(' + (data.avg).toFixed(2) + ")",
										},
										lineStyle: {
											type:'solid'
										}

									},
									{
										yAxis: data.hControl,
										label: {
											show: true,
											formatter: '上控制线(' + (data.hControl).toFixed(2) + ")",
										},
										lineStyle: {
											color: 'red'
										}
									},
									{
										yAxis: data.lControl,
										label: {
											show: true,
											formatter: '下控制线(' + (data.lControl).toFixed(2) + ")",
										},
										lineStyle: {
											color: 'red'
										}

									},
									{
										yAxis: data.hWarn,
										label: {
											show: true,
											formatter: '上警告线(' + (data.hWarn).toFixed(2) + ")",
										},
										lineStyle: {
											color: '#faa646'
										}
									},
									{
										yAxis: data.lWarn,
										label: {
											show: true,
											formatter: '下警告线(' + (data.lWarn).toFixed(2) + ")",
										},
										lineStyle: {
											color: '#faa646'
										}
									},
									{
										yAxis: data.hLimit,
										label: {
											show: true,
											formatter: '上1S线(' + (data.hLimit).toFixed(2) + ")",
										},

									},
									{
										yAxis: data.lLimit,
										label: {
											show: true,
											formatter: '下1S线(' + (data.lLimit).toFixed(2) + ")",
										},

									},
								],
								lineStyle: {
									color: '#409EFF'
								},
								label:
								{
									show: true,
									//  formatter: '{a}',
								}
							},
							itemStyle: {
								normal: {
									color: '#409EFF',
									align: 'center',
								}
							},
						}
					]
				});
			}
		},
		computed: {
			...mapState(['enableStatus', 'tableHeightA']),
		},
	}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.qualityPicture .seachTip .infoitem {
		width: calc(100%/6 + 15px);
		padding: 0;
	}
</style>